<template>
  <div class="blind-box-order">

    <template>
      <el-form :inline="true" class="demo-form-inline">
<!--        <el-form-item label="类型">-->
<!--          <el-select clearable v-model="type" placeholder="请选择">-->
<!--            <el-option-->
<!--              v-for="item in allTypes"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="是否回收">
          <el-select clearable v-model="isRecycle" placeholder="请选择">
            <el-option
              v-for="item in allIsRecycles"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否发货">
          <el-select clearable v-model="isAddress" placeholder="请选择">
            <el-option
              v-for="item in allIsAddress"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData">搜索</el-button>
        </el-form-item>
      </el-form>
    </template>

    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="orderNum" label="订单编号"></el-table-column>
      <el-table-column prop="userName" label="用户"></el-table-column>
      <el-table-column prop="drwaName" label="盲盒名称"></el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          {{ getType(scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column label="是否回收">
        <template slot-scope="scope">
          <span>{{ scope.row.isRecycle == '2' ? '已回收' : '未回收' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否发货">
        <template slot-scope="scope">
          <span :class="getSendStyle(scope.row.isAddress)">{{ getSendSte(scope.row.isAddress) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleClick(scope.row)" size="small">确认发货</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <el-dialog title="确认发货" :visible.sync="dialogFormVisible">
      <el-form ref="formName" :model="form" v-if="form.type === 3">
        <el-form-item label="运单号">
          <el-input v-model="form.awb" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleChangeConfirm" :loading="changeNow">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: 'BlindBoxOrder',
  data () {
    return {
      list: [],
      page: 0,
      size: 10,
      total: 10,

      // type: null,
      // allTypes: [
      //   {label: '钻石', value: 1},
      //   {label: '奖金', value: 2},
      //   {label: '实物', value: 3},
      // ],
      isRecycle: null,
      allIsRecycles: [
        {label: '未回收', value: 1},
        {label: '已回收', value: 2},
      ],
      isAddress: null,
      allIsAddress: [
        {label: '未发货', value: 0},
        {label: '申请发货', value: 1},
        {label: '已发货', value: 2},
      ],

      dialogFormVisible: false,
      form: {
        id: '',
        awb: '',
        type: null,
      },
      changeNow: false,
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 查询盲盒中奖记录  page,size,userId,type,isRecycle,isAddress
    async getData () {
      const {data: res} = await this.$http({
        url: this.$http.adornUrl2('/draw/findBlindBox'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.page,
          size: this.size,
          isRecycle: this.isRecycle, // 1,2
          isAddress: this.isAddress // 0, 1, 2
        })
      })
      const {data} = res
      const {totalElements, content, number} = data
      this.list = content
      this.page = number
      this.total = totalElements
    },
    handleClick (row) {
      this.dialogFormVisible = true
      this.form = row
    },
    handleChangeConfirm () {
      if (this.form.type === 3 && !this.form.awb) {
        return this.$message.error('运单号不能为空！')
      }
      let ids = [this.form.id], type = 2, awb = this.form.awb
      this.sendGift({ids, type, awb})
    },
    async sendGift ({ids, type, awb}) {
      console.log(ids, type, awb)
      const {data: res} = await this.$http({
        url: this.$http.adornUrl2(`/draw/delivery?ids=${ids}&type=${type}&awb=${awb}`),
        method: 'get',
      })
      const {msg, status} = res
      if (status === 0) {
        this.$message.success(msg)
        this.dialogFormVisible = false
        this.getData()
      }
    },
    handleCurrentChange (e) {
      this.page = e
      this.getData()
    },
    getType (type) {
      switch (type) {
        case 1:
          return '钻石'
        case 2:
          return '奖金'
        case 3:
          return '实物'
        default:
          return ''
      }
    },
    getSendStyle (ste) {
      switch (ste) {
        case 0:
          return 'wait'
        case 1:
          return 'apply'
        case 2:
          return 'ready'
        default:
          return ''
      }
    },
    getSendSte (ste) {
      switch (ste) {
        case 0:
          return '未发货'
        case 1:
          return '申请发货'
        case 2:
          return '已发货'
        default:
          return ''
      }
    }
  }
}
</script>

<style lang="scss">
.blind-box-order {
  .ready {
    color: #2bb673;
  }

  .apply {
    color: #cf9236;
  }

  .wait {
    color: #dd0000;
  }
}
</style>
